<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/5/18
  Time: 9:23
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>article</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jPlayer/jplayer.flat.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/simple-line-icons.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/app.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/ie/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/respond.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ie/excanvas.js"></script>
    <![endif]-->
    <style>
        .coverImg{
            width: 100%;
            height: 25%;
        }
    </style>
</head>
<body>

    <section class="scrollable padder-lg">
        <h2 class="font-thin m-b">${title}</h2>
        <div class="row row-sm">

            <c:forEach var="aiticle" items="${articleList}">

                <!-- 一个视频-->
                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
                    <div class="item">
                        <div class="pos-rlt">
                            <div class="bottom">
                                <span class="badge bg-info m-l-sm m-b-sm">${aiticle.time}</span><!-- 显示视频的时间-->
                            </div>
                            <div class="item-overlay opacity r r-2x bg-black">
                                <div class="text-info padder m-t-sm text-sm">
                                    <!-- 评分的五角星 不能评价的显示为0.0 可以评价的显示之后为评价好的分数-->
                                    <c:choose>
                                        <c:when test="${aiticle.great==null}">
                                            <i class="fa fa-star"></i> 待
                                        </c:when>
                                        <c:otherwise>
                                            <i class="fa fa-star"></i> ${aiticle.great}
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                <div class="center text-center m-t-n">
                                    <!-- 播放键 -->
                                    <a href="<%=(basePath)%>article/getDetail/${aiticle.id}" target="body">
                                        <i class="icon-control-play i-2x"></i>
                                    </a>
                                </div>
                                <div class="bottom padder m-b-sm"><!-- 点赞-->
                                    <c:choose>
                                        <c:when test="${aiticle.isChooseLike==0}">
                                            <a class="btn  pull-right" data-toggle="button" onclick="like1(${aiticle.id})" >
                                                <i class="fa fa-heart-o text"></i>
                                                <i class="fa fa-heart text-active text-danger"></i>
                                                <span id="num1${aiticle.id}">${aiticle.likeNum}</span>

                                            </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a class="btn  pull-right active" data-toggle="button" onclick="like2(${aiticle.id})">
                                                <i class="fa fa-heart text-active text-danger"></i>
                                                <i class="fa fa-heart-o text"></i>
                                                <span id="num2${aiticle.id}">${aiticle.likeNum}</span>
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </div>
                            <a href="#">
                                <c:choose>
                                    <c:when test="${aiticle.coverUrl!=null}">
                                        <img src="<%=(basePath)%>${aiticle.coverUrl}" alt="" class="r r-2x img-full coverImg">
                                    </c:when>
                                    <c:otherwise>
                                        <img src="${pageContext.request.contextPath}/images/m40.jpg" alt="" class="r r-2x img-full coverImg">
                                    </c:otherwise>
                                </c:choose>
                            </a>
                        </div>
                        <div class="padder-v">
                            <b class="text-ellipsis">${aiticle.title}</b>
                            <a class="text-ellipsis text-xs text-muted">By ${aiticle.authorName}</a><!-- 链接到上传者的主页-->
                        </div>
                        <input type="hidden" id="isChooseLike${aiticle.id}" value="${aiticle.isChooseLike}">

                    </div>
                </div>
                <!-- ／一个视频-->

            </c:forEach>
        </div>


            <div class="text-center m-t-lg m-b-lg">
                <ul class="pagination pagination-md">
                    <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
                </ul>
            </div>


    </section>

    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>

    <!-- Bootstrap -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <!-- App -->
    <script src="${pageContext.request.contextPath}/js/app.js"></script>
    <script src="${pageContext.request.contextPath}/js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/app.plugin.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jPlayer/demo.js"></script>
    <script>
        function like1(data) {
            //alert(data);
            var isChooseLike=$("#isChooseLike"+data).val();
            var num=parseInt($("#num1"+data).text());
            if (isChooseLike > 0){
                $("#isChooseLike"+data).val(0);
                $("#num1"+data).html(num-1);
            }else {
                $("#isChooseLike"+data).val(1);
                $("#num1"+data).html(num+1);
            }
            addChangeToDataBase(data);
        }

        function like2(data) {
            //alert(data);
            var isChooseLike=$("#isChooseLike"+data).val();
            var num=parseInt($("#num2"+data).text());
            if (isChooseLike > 0){
                $("#isChooseLike"+data).val(0);
                $("#num2"+data).html(num-1);
            }else {
                $("#isChooseLike"+data).val(1);
                $("#num2"+data).html(num+1);
            }
            addChangeToDataBase(data);

        }

        function addChangeToDataBase(articleId) {
            var regInfo={
                articleId:articleId
            };
            $.ajax({
                contentType:"application/json",
                url:getRootPath()+"/like/addOrRemove",
                type:"post",
                dataType:"json",
                data:JSON.stringify(regInfo),
                success:function (data) {
                    if (data==0){
                        layer.msg("保存失败", {time: 3000, icon:2});
                    }else if (data==2){
                        layer.msg("请先登录", {time: 3000, icon:2});
                    }
                },
                error:function (error) {
                    layer.msg('连接失败！', {time: 3000, icon:5});
                }

            });
        }
        function getRootPath() {
            var curWwwPath = window.document.location.href;
            var pathName = window.document.location.pathname;
            var pos = curWwwPath.indexOf(pathName);
            var localhostPaht = curWwwPath.substring(0, pos);
            var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
            return (localhostPaht + projectName);
        }
    </script>
</body>
</html>
